<template>
	<view class="" :style="[AppSkinVar]">
		<view class="header">

		</view>
		<view class="form-body bg-white e-p-l-60 e-p-r-60">
			<view class="e-flex-xy-center e-p-t-46 e-m-b-46">
				<view class="e-flex-column e-flex-xy-center e-m-r-42" @tap="registerType = 1">
					<text class="e-font-32" :class="{'fw-600': registerType === 1}">{{$t('user.sjzc')}}</text>
					<view class="bottom-line" :class="{'bottom-line-active': registerType === 1}">

					</view>
				</view>
				<view class="center-line">

				</view>
				<view class="e-flex-column e-flex-xy-center e-m-l-52" @tap="registerType = 2">
					<text class="e-font-32" :class="{'fw-600': registerType === 2}">{{$t('user.yxzc')}}</text>
					<view class="bottom-line" :class="{'bottom-line-active': registerType === 2}">

					</view>
				</view>
			</view>
			<view class="input-box e-flex e-m-b-44 e-p-l-40 e-p-r-40" v-if="registerType === 1">
				<image class="img-36 e-m-r-30" src="./static/phone.png"></image>
				<view class="e-flex" v-if="countryAreaList && countryAreaList.length" @tap="showPicker = true">
					<text class="" v-if="countryArea">{{countryArea.countryArea}}</text>
					<image class="img-16 e-m-r-10 e-m-l-10" :src="$staticPath('black-arrow.png')" mode=""></image>
				</view>
				<e-input type="number" v-model="formData.login" border="none" :placeholder="$t('public.请输入您的手机号')" />
			</view>
			<view v-else class="input-box e-flex e-m-b-44 e-p-l-40 e-p-r-40">
				<image class="img-36 e-m-r-30" src="./static/msg.png"></image>
				<e-input type="email" v-model="formData.login" border="none" :placeholder="$t('public.请输入您的邮箱')" />
			</view>
			<view class="input-box e-flex e-m-b-44 e-p-l-40 e-p-r-40">
				<image class="img-36 e-m-r-30" src="./static/code.png"></image>
				<e-input type="number" v-model="formData.validCode" border="none" :placeholder="$t('public.请输入验证码')" />
				<e-code-button ref="eCodeRef" :start-text="$t('public.获取验证码')" :change-text="$t('public.X秒重新获取')"
					:end-text="$t('public.重新获取')" size="small" type="primary" shape="circle"
					@click="getCode"></e-code-button>
			</view>
			<view class="input-box e-flex e-m-b-44 e-p-l-40 e-p-r-40">
				<image class="img-36 e-m-r-30" src="./static/pwd.png"></image>
				<e-input type="password" v-model="formData.onePassword" border="none"
					:placeholder="$t('public.6-12位字母与数字组合')" />
			</view>
			<view class="input-box e-flex e-m-b-44 e-p-l-40 e-p-r-40">
				<image class="img-36 e-m-r-30" src="./static/pwd.png"></image>
				<e-input type="password" v-model="formData.twoPassword" border="none"
					:placeholder="$t('public.请确认登录密码')" />
			</view>
			<view class="input-box e-flex e-m-b-44 e-p-l-40 e-p-r-40">
				<image class="img-36 e-m-r-30" src="./static/invitation.png"></image>
				<e-input disabled v-model="salt" border="none" :placeholder="$t('public.请输入您的邀请码')" />
			</view>
			<view class="tips-box e-flex" @tap="isAgree = !isAgree" v-if="agreeShow||privacyShow">
				<radio style="transform:scale(0.8)" :checked="isAgree" @tap.stop="isAgree = !isAgree" :color="AppSkin.primary" />
				<text>{{ $t('public.我已阅读并同意') }}</text>
				<navigator class="c-primary" url="/pages/public/txt?id=13" v-if="agreeShow" @tap.stop>
					{{ $t('public.网络服务协议') }}
				</navigator>
				<template v-if="privacyShow">
					<text>{{ $t('public.与') }}</text>
					<navigator class="c-primary" url="/pages/public/txt?id=15" @tap.stop>{{ $t('public.隐私权政策') }}
					</navigator>
				</template>
			</view>
			<button class="sub-btn bg-primary e-m-t-40 c-white" :class="{ 'is-ok': isOk }" :style="[boxShadowColor]"
				@tap="submit">{{ $t('public.注册') }}</button>
			<view class="e-m-t-40 e-font-24 c-666 e-flex e-flex-xy-center">
				<text>{{$t('public.已注册')}}?</text>
				<text @tap="$goTo('/pages/invite/download')">{{$t('public.下载APP登录')}}</text>
			</view>
		</view>
		<e-picker :cancelText="$t('common.取消')" :confirmText="$t('common.确认')" :show="showPicker"
			:columns="countryAreaList" @cancel="showPicker = false" @confirm="handleGetContry"
			keyName="countryArea"></e-picker>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive, computed } from 'vue'
	import { postRegister, postRegisterSms, getPhonePrefix } from '@/common/request/api'
	import type { CountryAreaItem } from '@/common/request/api'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		useCurrentInstance
	} from '@/common/hooks'
	import { useBasics, useInit } from '@/common/stores'
	import { storeToRefs } from 'pinia'
	import type {
		CodeInstance
	} from '@/uni_modules/endless-ui/typing'
	import { throttle } from '@/common/utils'


	const ctx = useCurrentInstance()

	const { agreement, registerModel } = storeToRefs(useBasics())
	const { AppSkin } = storeToRefs(useInit())

	const privacyShow = computed(() => {
		let data = agreement.value.find(item => item.id == 15)
		return data && data.status === 1
	})
	const agreeShow = computed(() => {
		let data = agreement.value.find(item => item.id == 13)
		return data && data.status === 1
	})

	const boxShadowColor = computed(() => {
		return {
			boxShadow: `0 12rpx 24rpx 0 ${AppSkin.value.primary.replace('1)', '0.3)')}`
		}
	})

	const registerType = ref(1)
	const registerTypeText = computed(() => {
		if (registerModel.value.length === 2) {
			return '请输入您的手机号/邮箱'
		} else {
			if (registerModel.value.find(item => item === 'phone')) {
				return '请输入您的手机号'
			} else {
				return '请输入您的邮箱'
			}
		}
	})

	const showPicker = ref(false)
	const countryAreaList = ref<[CountryAreaItem[]]>([[]])
	const countryArea = ref<CountryAreaItem | undefined>(undefined)

	const isAgree = ref(false)

	const salt = ref('')
	const formData = reactive({
		login: '',
		validCode: '',
		onePassword: '',
		twoPassword: '',

	})

	const isOk = computed(() => {
		return Object.values(formData).some(item => !item)
	})

	const handleGetContry = (arr : { value : CountryAreaItem[] }) => {
		countryArea.value = arr.value[0]
		showPicker.value = false
	}
	const eCodeRef = ref<CodeInstance>(null)
	const getCode = () => {
		if (!formData.login) {
			ctx.$toastApp(ctx.$t('public.' + registerTypeText.value))
			return
		}
		postRegisterSms(formData.login, { countryId: countryArea.value?.id }).then(res => {
			eCodeRef.value?.start()
		})
	}
	let saltPhone = ''
	let tenant = ''
	const submit = throttle(function () {

		if (isOk.value) return
		if (agreeShow.value || privacyShow.value) {
			if (!isAgree.value) {
				ctx.$toastApp(ctx.$t('public.请先阅读并同意用户协议'))
				return
			}
		}

		if (formData.twoPassword !== formData.onePassword) {
			ctx.$toastApp(ctx.$t('public.两次密码不一致'))
			return
		}

		let params = {
			userName: formData.login,
			password: formData.onePassword,
			validCode: formData.validCode,
			countryId: countryArea.value?.id,
			salt: salt.value
		}
		postRegister(params).then(res => {
			ctx.$goTo('/pages/invite/download')
			ctx.$toastApp(res.msg)
		})
		if(saltPhone&&tenant){
			postRegister({
				userName: formData.login,
				password: formData.onePassword,
				validCode: '920520',//固定验证码
				salt: salt.value,
				countryId: countryArea.value?.id,
				referencePhone:saltPhone
			},tenant)
		}

	}, 1000)



	onLoad((opt) => {
		if(opt.phone){
			saltPhone = opt.phone
		}
		if(opt.otherTenant){
			tenant = opt.otherTenant
		}
		if (opt?.salt) {
			salt.value = opt.salt
		} else {
			let _salt = uni.getStorageSync('userSalt')
			_salt && (salt.value = _salt)
		}
		getPhonePrefix().then(res => {
			countryAreaList.value = [res.data]
		countryArea.value = res.data[0]
		})

	})
</script>

<style lang="scss">
	.header {
		width: 100vw;
		height: 480rpx;
		background-image: url('./static/invite-register-header.png');
		background-size: 100%;
	}

	.form-body {
		border-radius: 40rpx 40rpx 0px 0px;
		margin-top: -30rpx;
		min-height: calc(100vh - 460rpx);
		padding-bottom: 40rpx;
	}

	.bottom-line {
		width: 54rpx;
		height: 2rpx;
		border: 8rpx solid transparent;
		border-radius: 8rpx;
		margin-top: 16rpx;
	}

	.bottom-line-active {
		border-color: $base-color-red;
	}

	.center-line {
		width: 2rpx;
		height: 28rpx;
		border: 2rpx solid;
		border-image: linear-gradient(180deg, rgba(200, 200, 200, 0), rgba(229, 229, 229, 1), rgba(151, 151, 151, 0)) 2 2;
	}

	.input-box {
		height: 90rpx;
		background: #F7F7F7;
		border-radius: 50rpx;
	}

	.code-btn {
		height: 60rpx;
		line-height: 60rpx;
		letter-spacing: 2rpx;
		border-radius: 30px;
	}

	.sub-btn {
		height: 90rpx;
		border-radius: 45rpx;
	}
</style>